<template>
  <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>登录</span>
        </div>
        <div class="text item">
            <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">

                <el-form-item label="用户名" prop="username">
                    <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="login">登录</el-button>
                </el-form-item>

            </el-form>
        </div>
      </el-card>

  </div>

</template>

<script>
import {login} from '../service/ajax.js'

export default {
    data() {
        return{
            ruleForm: {
                username: "",
                password: "",
            }
        }   
    },

    methods:{
        async login() {
            var loginUserToken = await login(this.ruleForm.username,this.ruleForm.password);
            console.log(JSON.stringify(loginUserToken));
            if (loginUserToken.length != 0) {
                // console.log(JSON.stringify(loginUser))
                this.$router.push("/comment")
            }
            alert("用户名或密码错误");
        },
    
    },

}
</script>

<style>

</style>